﻿<MCard Class="mx-auto" MaxWidth="344" Outlined>

    <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/sunshine.jpg" Height="200"></MImage>

    <MCardTitle>
        Top western road trips
    </MCardTitle>

    <MCardSubtitle>
        1,000 miles of wonder
    </MCardSubtitle>

    <MCardActions>
        <MButton Color="orange lighten-2" Text>Explore</MButton>

        <MSpacer></MSpacer>

        <MButton Icon OnClick="() => show = !show">
            <MIcon>@(show ? "mdi-chevron-down" : "mdi-chevron-up")</MIcon>
        </MButton>

    </MCardActions>
    <div style="@(show ? "display:none" : "")">
        <MDivider></MDivider>
        <MCardText>
            I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
        </MCardText>
    </div>

</MCard>

@code {
    bool show = true;
}